<template>
  <div>
    <div class="layout-container" :class="{'old': elder}">
      <div class="layout-section">
        <top-header :show-elder="true" :auth-check="false" @setElder="setElderByChild"></top-header>

        <div class="home-tabs">
          <ul class="home-tabs-header">
            <li class="home-tab-title" :class="{'active':  homeTab === 0}" @click="homeTab = 0">
              <img src="@/assets/APP-1.png" alt="">
              <span>基本信息</span>
            </li>
            <li class="home-tab-title" :class="{'active':  homeTab === 1}" @click="homeTab = 1">
              <img src="@/assets/APP-2.png" alt="">
              <span>变更信息</span>
            </li>
            <li class="home-tab-title" :class="{'active':  homeTab === 2}" @click="homeTab = 2">
              <img src="@/assets/APP-3.png" alt="">
              <span>内档资料</span>
            </li>
          </ul>
          <div class="home-tabs-body">
            <div class="home-tab-body active" v-show="homeTab === 0">
              <el-autocomplete
                  class="layout-tab-search eraq-ent-inputer"
                  v-model="entName.base"
                  :fetch-suggestions="queryNames"
                  placeholder="请输入企业名称"
                  :trigger-on-focus="false"
                  @select=""
              ></el-autocomplete>
              <button name="btnOk" label="确认" @click="doSave('0')"></button>
            </div>
            <div class="home-tab-body" v-show="homeTab === 1">
              <el-autocomplete class="layout-tab-search eraq-ent-inputer" v-model="entName.change"
                               :fetch-suggestions="queryNames" placeholder="请输入企业名称" :trigger-on-focus="false"
                               @select=""/>
              <button name="btnOk" label="确认" @click="doSave('1')"></button>
            </div>
            <div class="home-tab-body" v-show="homeTab === 2">
              <ul class="home-tab-list">
                <li class="home-tab-list__item" @click="$router.push({path: '/company'})">
                  <img src="@/assets/datai1.png" alt="">
                  <span>我是企业</span>
                </li>
                <li class="home-tab-list__item" @click="$router.push({path: '/courts'})">
                  <img src="@/assets/datai2.png" alt="">
                  <span>我是公检法</span>
                </li>
                <li class="home-tab-list__item" @click="$router.push({path: '/lawer'})">
                  <img src="@/assets/datai3.png" alt="">
                  <span>我是律师</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="home-que-tit">常见问题</div>
        <question></question>

        <footer-right></footer-right>
      </div>

      <footer-nav :active-index="0"></footer-nav>
    </div>

    <div class="wrapper" v-if="pageErr.loadding">
      <div class="loding">
        <img src="@/assets/loading.gif" title="用户登录中" alt="" v-if="!pageErr.show"/>
        <img src="@/assets/info.png" title="出错了" alt="" v-if="pageErr.show"/>
        <p>{{ pageErr.msg }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import footerNav from "@/components/footerNav";
import footerRight from "@/components/footerRight";
import question from "@/components/question";
import TopHeader from "@/components/topHeader";
import {apiSaveBase, apiSaveChange, apiReqEntNames} from "@/api/apply";
import {ajaxUtils, strUtils} from "@/utils/lwUtils";
import {setAplus} from "@/api/aliAplus";
import {setOldModal} from "@/utils/oldModal";
import ssoUtil from "@/api/ssoUtil";

export default {
  data() {
    return {
      pageErr: {
        loadding: false, show: false, msg: "登录中",
      },
      homeTab: 0,
      elder: false,
      entName: {
        base: "", change: "",
      },
      escapeTime: {
        t1: 0, t2: 0,
      },
    }
  },
  components: {TopHeader, footerNav, footerRight, question,},
  created() {
    this.escapeTime.t1 = new Date().getTime();

    //若是页面错误，则显示错误
    let val = strUtils.getUrlParam("errMsg");
    if (!strUtils.isEmpty(val)) {
      this.$eraqDlg.alert(decodeURI(decodeURI(val)));
      return;
    }

    //读取浙里办适老化模式
    this.getZlbOlderModel();

    //单点登录
    ssoUtil.doSsoLogin();
  },
  mounted() {
    this.escapeTime.t2 = (new Date().getTime() - this.escapeTime.t1) / 1000;

    //添加埋点
    setAplus(this.escapeTime.t1, this.escapeTime.t2);
  },
  methods: {
    showError: function (show, msg) {
      this.pageErr.show = show;
      this.pageErr.msg = msg;
    },

    //从浙里办中读取适老化模式
    getZlbOlderModel: function () {
      ZWJSBridge.onReady(() => {
        ZWJSBridge.getUiStyle({}).then((result) => {
          setOldModal(result.uiStyle === "elder" ? "true" : "false");
        }).catch(() => {
          setOldModal("false");
        });
      });
    },

    //子组件调用方法，设置老年模式
    setElderByChild: function (elder) {
      this.elder = elder;
    },
    queryNames: function (queryString, cb) {
      apiReqEntNames(queryString, cb);
    },
    doSave: function (infoType) {
      if ((infoType === "0" && this.entName.base === "") || (infoType === "1" && this.entName.change === "")) {
        this.$eraqDlg.warning("请输入企业名称");
        return;
      }
      let savePromise = infoType === "1" ? apiSaveChange(this.entName.change) : apiSaveBase(this.entName.base);
      savePromise.then(res => {
        if (ajaxUtils.checkFail(res.code, res.msg)) {
          return;
        }
        if (res.data.handlestate === "办结") {
          this.$router.push({path: "/showBase", query: {type: res.data.infotype, unid: res.data.unid}});
        } else {
          this.$router.push({path: "/list"});
        }
      }).catch(err => {
        this.$eraqDlg.error("数据保存异常：" + err.body.message);
      });
    },
  },
}
</script>

<style lang='scss' scoped>
@import "src/css/home";

.eraq-ent-inputer {
  width: 100%;
  margin: 20px 0 20px 0;
}

.wrapper {
  background: #ffffff; width: 100%; height: 100%; z-index: 9999; position: absolute; top: 0; left: 0;
}

.loding {
  background: #9C9C9C;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.loding {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  text-align: center;
}

.loding img {
  width: 96px;
  height: 96px;
  margin-top: 5px;
}

.loding p {
  width: 100%;
  color: #ffffff;
  margin-top: 10px;
}
</style>
